<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JS实现文本域获得焦点文字消失，失去焦点文字显示</title>
</head>
<body>
  用户名：<input type="text" placeholder="请输入用户名">

  <script>
    const input = document.querySelector('input[type=text]');
    //获取焦点事件
    input.onfocus = function() {
      if(this.placeholder == '请输入用户名') {
        this.placeholder = '';
      }
    }
    //失去焦点事件
    input.onblur = function() {
      if(this.placeholder == '') {
        this.placeholder = '请输入用户名';
      }
    }
  </script>
</body>
</html>